<template>
    <div class="tianyashequ">
        <el-container>
            <el-main>
                <el-row>
                    <el-col>
                        <div class="box1">
                            <img src="../assets/tianyashequ/nav_top_logo_35.png" alt="">
                            <img src="../assets/tianyashequ/login-word_c3b0e3b.png" alt="">
                        </div>
                        <div class="laitianya">
                           <h6>来天涯，与143190368位天涯人共同演绎你的网络人生</h6> 
                        </div>
                        <div class="tu100">+
                            <div class="neirong">
                                <span class="yongtianya">用天涯APP扫码安全登录</span>
                                <div class="tu101"><img class="suibian1" src="../assets/tianyashequ/qrcode.do.png" alt="">
                                <img class="suibian" src="../assets/tianyashequ/hao.png" alt=""></div>
                                <span class="xiazaitianya">下载天涯社区客户端</span>
                                <span class="lijizhuce">立即注册</span>
                                <div>
                                    <span class="dangqian">当前在线：217235</span>
                                    <span class="liulan">浏览进入>></span>
                                </div>
                            </div>
                        </div>
                        <div class="dibu">
                           
                            <ul class="ya">
                                <li class="guanyu">关于天涯</li>
                                <li class="shu">|</li>
                                <li class="guangao">广告服务</li>
                                <li class="shu">|</li>
                                <li class="guangao">天涯客服</li>
                                <li class="shu">|</li>
                                <li class="guangao">隐私和版权</li>
                                <li class="shu">|</li>
                                <li class="guangao">联系我们</li>
                                <li class="shu">|</li>
                                <li class="guangao">加入天涯</li>
                                <li class="shu">|</li>
                                <li class="ertong">儿童不良信息举报</li>
                                <li class="suoyou">©1999-2020天涯社区版权所有</li>
                            </ul>
                            <div class="zengzhi">
                                <ul class="zheng">
                                    <li id="jingying">增值电信业务经营许可证(琼B2-20060032)</li>
                                    <li>网络文化经营许可证(琼网文【2018】9148-792号)</li>
                                    <li>互联网药品信息服务资格证书(琼)-经营性-2010-0003</li>
                                </ul>
                           </div> 
                           <div class="xinxi">
                               <ul>
                                   <li class="jiemu"  id="jingying1">信息网络传播视听节目许可证</li>
                                   <li class="jiemu">广播电视节目制作经营许可证(琼字第052号)</li>
                                   <li class="jiemu">琼公网安备 4601062000002号</li>
                                   <li>打击网络侵权盗版"剑网2018"专项行动举报投诉热线12318</li>
                               </ul>
                           </div>
                            <div class="zuihoutupian">
                                <img src="../assets/tianyashequ/ft-logoV4_aea6915.jpg" alt="">
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<style>
.tianyashequ{
    /* background: rgb(73, 212, 8); */
    height: 800px;
    width: 100%;
    margin: auto;
}
.box1{
    margin-top:20px ;
    margin-left:150px ;
}
.laitianya{
    color: #999;
    float: left;
    margin-left:850px ;
    margin-top:-50px ;
    /* border: 1px red solid; */
}
.tu100{
    width: 100%;
    height: 500px;
    background: url(../assets/tianyashequ/0_47.jpg);
    background-size: 100%;
    margin-top:30px;
    /* padding: 30px; */
    background-repeat: no-repeat;
}
.neirong{
    background: #fff;
    width: 300px;
    height: 290px;
    float: right;
    position: relative;
    top:40px;
    right: 285px;
}
.yongtianya{
    margin-left:85px ;
    font-size: 10px;
    position: relative;
    top:20px;
    /* text-align: cenetr; */
}
.tu101{
   padding: 10px;
    width: 130px;
    height: 130px;
    margin:20px auto;
    
}
.suibian{
    width: 300px;
    height: 590px;
    position: relative;
    left: -385px;
    top: -225px;
    display:none;
}
.suibian1{
    width: 100%;
}
.tu101:hover .suibian{
    display:block ;
}
.xiazaitianya{
    font-size: 5px;
    /* border: 1px red solid; */
    position: relative;
    top:-28px;
    margin-left: 93px;
   text-decoration:none;
}
.xiazaitianya:hover{
  text-decoration:underline;
  color:red;
}
.lijizhuce{
    font-size: 5px;
    text-decoration:none;
    color:blue;
}
.lijizhuce:hover{
    text-decoration:underline;
    color:blue;
}
.dangqian{
    /* border: 1px red solid; */
    font-size: 5px;
    left:15px ;
    position: relative;
    top:28px;
    
}
#jingying{
    margin-left:290px ;
}
#jingying1{
    margin-left:240px ;
}
.liulan{
    font-size: 5px;
    left:110px ;
    position: relative;
    top:28px;
    text-decoration:none;
}
.liulan:hover{
    text-decoration:underline;
}
.dibu{
    
    margin-top: -146px;
    /* background: blueviolet; */
    height: 340px;
    width: 100%;
    float: left;
}
.dibu>ul>li{
    float: left;
    list-style-type:none;
    margin-left:10px ;
    font-size: 10px;
    margin-top: 140px;
    
}
.guanyu{
   padding-left:320px ;
    text-decoration:none;
    color:#969696;
}
.guanyu:hover{
    text-decoration:underline;
     color:red;
     
}
.guangao{
    text-decoration:none;
    color:#969696;
}
.guangao:hover{
 text-decoration:underline;
 color:red;
}
.ertong{
    color:red;
    text-decoration:none;
}
.ertong:hover{
    text-decoration:underline;
    color:red;
}
.suoyou{
    color:#969696;    
}
.zengzhi{
   color:#969696;
    /* background: blueviolet; */
    /* height: 340px; */
    width: 100%;
    float: left;
    
}
.zengzhi>ul>li{
    float: left;
    list-style-type:none;
    margin-left:10px ;
    font-size: 10px;
    text-decoration:none;
}
.zengzhi>ul>:hover{
    text-decoration:underline;
}
.shu{
    color:#969696;
}
.xinxi{
    color:#969696;
    /* background: blueviolet; */
    /* height: 340px; */
    width: 100%;
    float: left;
}
.xinxi>ul>li{
    float: left;
    list-style-type:none;
    margin-left:10px ;
    font-size: 10px;
    /* margin-top: 140px; */
     text-decoration:none;
}
.jiemu:hover{
    text-decoration:underline;
}
.zuihoutupian img{
    margin-left: 225px;
    margin-top:20px ;
}
</style>